<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>日历</title>
  <link rel="stylesheet" href="style.css">
  <script src="vue.min.js" charset="utf-8"></script>
  <script src="moment.min.js" charset="utf-8"></script>
</head>
<body>
  <div class="container">
    <header class="height5">
      <span @click="reduceMonth">&lt;</span>
      <span>{{fullYear}}年</span>
      <span>{{month}}月</span>
      <span @click="addMonth">&gt;</span>
    </header>
    <div  class="flexColumn height95">
      <div  class="flex1 flexRow">
        <div class="flex1">周日</div>
        <div class="flex1">周一</div>
        <div class="flex1">周二</div>
        <div class="flex1">周三</div>
        <div class="flex1">周四</div>
        <div class="flex1">周五</div>
        <div class="flex1">周六</div>
      </div>
      <div v-for="list in lists" class="flex1 flexRow">
        <div v-for="item in list" class="flex1"><div :class="(date == item.index && thisMonth == month) ? 'active' : ''">{{item.index}}</div></div>
      </div>
    </div>
  </div>
  <script type="text/javascript">
    new Vue({
      el:'.container',
      data:{
        fullYear:2017,//年
        month:1,//月
        thisMonth:1,//现在所在的这个月份
        date:1,//日
        weekDay:0,//星期
        lists:[],
        monthHasDayNum:31,//一个月总共有几天
        monthFirstDay:0,//每个月第一天星期几
        monthLastDay:0,//每个月最后一天星期几
      },
      mounted:function () {
        this.fullYear = new Date().getFullYear();
        this.month = new Date().getMonth()+1;
        this.thisMonth = new Date().getMonth()+1;
        this.weekDay = new Date().getDay();//星期几
        this.date = new Date().getDate();
        this.calculateMonthDay(this.fullYear,this.month,'init');
        this.initcalendar();
      },
      methods:{
         reduceMonth:function () {
           if(this.month != 1) {
             this.month -= 1;
           }else {
             this.fullYear -= 1;
             this.month = 12;
           }
           this.calculateMonthDay(this.fullYear,this.month,'reduce');
           this.initcalendar();
         },
         addMonth:function () {
            if(this.month != 12) {
              this.month += 1;
            }else {
              this.fullYear += 1;
              this.month = 1;
            }
            this.calculateMonthDay(this.fullYear,this.month,'add');
            this.initcalendar();
         },
         calculateMonthDay:function(year,month,type) {

            if(month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12) {
              this.monthHasDayNum = 31;
            }else if(month == 4 || month == 6 || month == 9 || month == 11){
              this.monthHasDayNum = 30;
            }
            if(month == 2) {
              if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {
                  this.monthHasDayNum = 29;
              } else {
                  this.monthHasDayNum = 28;
              }
            }
            switch (type) {
              case 'init':
                var timestamp = Date.parse(new Date());
                this.monthFirstDay = moment(timestamp).subtract(this.date-1, 'days').format('d');
                this.monthLastDay = moment(timestamp).add(this.monthHasDayNum-this.date, 'days').format('d');
                break;
              default:
                // console.log(year,month);
                var a = month < 10 ? moment(year+"0"+month+"01", "YYYYMMDD") : moment(year+""+month+"01", "YYYYMMDD");
                var b = month < 10 ? moment(year+"0"+month+""+this.monthHasDayNum, "YYYYMMDD") : moment(year+""+month+""+this.monthHasDayNum, "YYYYMMDD");
                this.monthFirstDay = a.format('d');
                this.monthLastDay = b.format('d');
                // console.log(this.monthFirstDay,this.monthLastDay);
            }

         },
         initcalendar:function() {
           var totalArr = [];
            //第一周
            var firstWeekArr = [];
            var fistj = 1;
            for (var i = 0; i < 7; i++) {
              if(i < Number(this.monthFirstDay)) {
                firstWeekArr.push({index:""});
              }else {
                firstWeekArr.push({index:fistj});
                fistj++
              }
            }
            //最后一周的数据
            var lastWeekArr = [];
            var lastj = Number(this.monthHasDayNum)-Number(this.monthLastDay);
            for (var i = 0; i < 7; i++) {
              if(i < Number(this.monthLastDay)+1) {
                lastWeekArr.push({index:lastj});
                lastj++
              }else {
                lastWeekArr.push({index:""});
              }
            }
            //中间的数组   last-(6-fist)/7
            var middleArrLength = (this.monthHasDayNum- (Number(this.monthLastDay)+1) - (6-Number(this.monthFirstDay)+1))/7;
            // console.log(middleArrLength);
            for (var j = 0; j < middleArrLength+1; j++) {
              if(j == 0) {
                totalArr[j] = firstWeekArr;
              }else {
                totalArr[j] = [];
                for (var k = 0; k < 7; k++) {
                  totalArr[j][k] = {index:fistj};
                  fistj++
                }
              }
            }
            //加上最后一周的数据就是总的数据
            totalArr.push(lastWeekArr);
            this.lists = totalArr;
         }
      }
    })
  </script>
</body>
</html>
